<template>
  <div class="cms-novel" :class="bgColor ? `style_${type}` : `style_${type} bg-white`">
    <div class="type-two">
      <div class="hit">
        <span class="hot-play"
          ><span>{{ title ? title : '热门' }}</span
          >{{ type === 3 || type === 4 ? '推荐' : '' }}</span
        >
        <div v-if="[1, 2].includes(Number(type))" class="more">
          <span>更多</span>
          <right-outlined class="ml-[6px]" />
        </div>
        <div v-if="type === 3" class="mt-0 change">
          <sync-outlined style="color: #ff512b; align-self: center" />
          <div class="change-text">换一换</div>
        </div>
      </div>

      <div v-if="type === 4" class="flex gap-x-3">
        <div class="novel">
          <div class="article_shadow">
            <img :src="typeView === 'novle' ? showIcons.article : showIcons.atlas" alt="" class="img-show" />
            <div class="free">
              <div class="free-text">免费</div>
            </div>
          </div>
        </div>
        <div class="w-[233px]">
          <div class="flex justify-between flex-1">
            <span class="text-xs text-[#484a4d] mt-2">{{ typeView === 'novle' ? '小说名称' : '图集名称' }}</span>
            <span class="text-xs text-[#FF6842] mt-2 mr-1">评分</span>
          </div>
          <div class="text-xs text-[#b4b8bf] mt-2">
            {{ typeView === 'novle' ? '小说简介' : '图集简介' }}
          </div>
          <div class="text-xs text-[#b4b8bf] mt-5">标签·类型·阅读值</div>
        </div>
      </div>

      <div class="novel-grid">
        <template v-if="type !== 3">
          <div class="novel" v-for="(item, index) in 4" :key="index">
            <div class="relative flex">
              <div class="article_shadow">
                <img :src="typeView === 'novle' ? showIcons.article : showIcons.atlas" alt="" class="img-show" />
              </div>
              <div v-if="index % 2 === 0" class="free">
                <div class="free-text">免费</div>
              </div>
              <div v-if="!(index % 2 === 0) && type !== 2" class="gold">
                <dollar-outlined class="gold-icon" />
                <span class="gold-text">120</span>
              </div>
              <div v-if="type === 2" class="free">
                <div class="free-text">免费</div>
              </div>
            </div>
            <div>
              <div v-if="type !== 4" class="novel-name">{{ typeView === 'novle' ? '小说简介' : '图集简介' }}</div>
              <div v-else class="text-xs text-[#4b4a4d] mt-2">{{ typeView === 'novle' ? '小说名称' : '图集名称' }}</div>

              <div v-if="type === 2" class="novel-category">类型</div>
            </div>
          </div>
        </template>

        <template v-if="type === 3">
          <div class="novel" v-for="(item, index) in 8" :key="index">
            <div class="relative flex article_shadow">
              <img :src="typeView === 'novle' ? showIcons.article : showIcons.atlas" alt="" class="img-show" />
              <div v-if="index % 2 === 0" class="free">
                <div class="free-text">免费</div>
              </div>
              <div v-if="!(index % 2 === 0)" class="gold">
                <dollar-outlined class="gold-icon" />
                <span class="gold-text">120</span>
              </div>
            </div>
            <div class="novel-name">{{ typeView === 'novle' ? '小说简介' : '图集简介' }}</div>
          </div>
        </template>
      </div>
      <div v-if="type === 2" class="change">
        <sync-outlined style="color: #ff512b; align-self: center" />
        <div class="change-text">换一换</div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import cmsNovelGridProps from './props'
import showIcons from '../../assets'
import { RightOutlined, DollarOutlined, SyncOutlined } from '@ant-design/icons-vue'

export default defineComponent({
  props: cmsNovelGridProps,
  setup() {
    const baseUrl = '/src/components/cms/components/src/'

    const novelData = [
      {
        url: 'assets/img/bltd.jpeg',
        title: '碧落天刀',
        des: '你好我是和玉竹',
        categories: '现代/言情',
        free: true
      },

      {
        url: 'assets/img/gtzs.jpeg',
        title: '高天之上',
        des: `遇见诡异，我
的器官觉醒`,
        categories: '现代/言情',
        free: true
      },
      {
        url: 'assets/img/jyzy.jpeg',
        title: '锦衣状元',
        des: '锦衣状元',
        categories: '现代/言情',
        free: false
      },
      {
        url: 'assets/img/ttyzxjg.jpeg',
        title: '偷偷养只小金龟',
        des: '偷偷养只小金龟',
        categories: '现代/言情',
        free: false
      }
    ]
    return {
      baseUrl,
      novelData,
      showIcons
    }
  },
  components: {
    RightOutlined,
    DollarOutlined,
    SyncOutlined
  }
})
</script>
<style scoped lang="less">
.cms-novel {
  width: 375px;
  padding: 8px 16px;
  .hit {
    @apply flex justify-between;
  }
  .hot-play {
    font-size: 16px;
    color: #000;
  }
  .more {
    font-size: 12px;
    color: #848494;
    text-align: center;
    align-self: center;
    font-weight: 400;
    margin-right: 5px;
  }
  .novel {
    position: relative;
  }
  .img-show {
    object-fit: cover;
  }

  .free {
    width: 36px;
    height: 20px;
    background-image: linear-gradient(135deg, #ffa45d 0%, #ff613f 100%);
    border-radius: 0 4px 0 4px;
    font-size: 12px;
    color: #ffffff;
    padding: 2px 6px;
    position: absolute;
    right: 0;
    top: 0;
  }
  .gold {
    height: 20px;
    background-image: linear-gradient(135deg, #eed78e 0%, #cbae6c 100%);
    border-radius: 0 4px 0 4px;
    font-size: 12px;
    line-height: 20px;
    color: #ffffff;
    padding: 0 6px;
    position: absolute;
    right: 0;
    top: 0;
    @apply flex;
    .gold-icon {
      align-self: center;
    }
  }
  .gold-icon {
    margin-right: 2px;
    font-size: 14px;
  }
  .change {
    border-radius: 3px;
    @apply flex justify-center mt-4;
  }
  .change-text {
    font-size: 12px;
    align-self: center;
    color: #ff512b;
    margin-left: 10px;
  }
  &.style_1 {
    .novel-grid {
      @apply flex gap-x-2 mt-4;
    }
    .novel {
      width: 79px;
    }
    .article_shadow {
      width: 79px;
      height: 154px;
      border-radius: 4px;
    }
    .img-show {
      width: 51px;
    }
    .novel-name {
      font-size: 14px;
      color: #484a4d;
      margin-top: 8px;
      font-weight: 400;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
  }
  &.style_2 {
    .type-two {
      background: #f6f8fb;
      border-radius: 8px;
      padding: 12px;
    }

    .novel-grid {
      @apply flex flex-wrap gap-x-3 gap-y-2 mt-4;
    }
    .novel {
      width: 153px;

      @apply flex gap-x-2;
      .article_shadow {
        width: 56px;
        height: 76px;
        border-radius: 2.8px;
        .img-show {
          width: 30px;
        }
      }
    }
    .free {
      padding: 0;
      width: 25px;
      height: 14px;
      line-height: 14px;
      font-size: 12px;
      border-radius: 0 2.8px 0 2.8px;

      .free-text {
        transform: scale(0.75);
      }
    }
    .novel-name {
      font-size: 14px;
      color: #484a4d;
      font-weight: 400;
    }
    .novel-category {
      font-size: 12px;
      color: #b4b8bf;
      font-weight: 400;
    }
  }
  &.style_3 {
    .type-two {
      background: #f6f8fb;
      border-radius: 8px;
      padding: 12px;
    }
    .novel-grid {
      @apply flex flex-wrap gap-x-2 gap-y-3 mt-4;
    }
    .novel {
      width: 73px;
      .article_shadow {
        width: 73px;
        height: 101px;
        border-radius: 3.6px;
        .img-show {
          width: 40px;
        }
      }
    }
    .free {
      border-radius: 0 3.6px 0 3.6px;
    }
    .gold {
      width: 46px;
      border-radius: 0 3px 0 3.6px;
    }
    .novel-name {
      font-size: 14px;
      color: #484a4d;
      font-weight: 400;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      margin-top: 8px;
    }
  }
  &.style_4 {
    .type-two {
      background: #f6f8fb;
      border-radius: 8px;
      padding: 12px;
    }
    .novel-grid {
      @apply flex flex-wrap gap-x-2 mt-4;
    }
    .novel {
      width: 73px;
      .article_shadow {
        width: 73px;
        height: 101px;
        border-radius: 3.6px;
        .img-show {
          width: 40px;
        }
      }
    }
    .free {
      border-radius: 0 3.6px 0 3.6px;
    }
    .gold {
      width: 46px;
      border-radius: 0 3px 0 3.6px;
    }
    .novel-name {
      font-size: 12px;
      color: #484a4d;
      font-weight: 400;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      margin-top: 8px;
    }
  }
}
</style>
